<template>

    <div class="card">
        <div class="card-header bg-white">
            {{title}}
        </div>
        <div class="card-body">
            <div class="form-group">
                <label for="account">{{accountTitle}}</label>
                <div class="input-group mb-3" :class="{'is-invalid':errors[formName]}">

                    <input type="text" id="account" class="form-control" :placeholder="titlePlaceholder"
                           v-model="$data[formName]"
                           @focus="errors[formName]=''"
                    >
                </div>

                <strong class="invalid-feedback" v-if="errors[formName]">{{ errors[formName]}}</strong>
            </div>


            <div class="form-group">
                <label for="captcha">图形验证码</label>
                {{errors.captcha}}
                <div class="input-group captcha" :class="{'is-invalid':errors.captcha}">
                    <input
                        type="text"
                        class="form-control"
                        id="captcha"
                        name="captcha"
                        placeholder="请输入图形验证码"
                        v-model="captcha"
                        @focus="errors.captcha=''"
                    />
                    <div class="input-group-append" style="cursor: pointer" @click="updateCaptcha">
                        <img :src="captchaImage" class="border"/>
                    </div>
                </div>
                <strong class="invalid-feedback" v-if="errors.captcha">{{ errors.captcha }}</strong>
            </div>
            <div class="form-group">
                <label for="code">{{codeTitle}}</label>
                <div class="input-group captcha" :class="{'is-invalid':errors.code}">
                    <input
                        type="text"
                        class="form-control"
                        id="code"
                        name="code"
                        :placeholder="codePlaceholder"
                        v-model="code"
                        @focus="errors.code=''"
                    />
                    <div class="input-group-append">
                        <a v-if="enableSend" class="btn btn-info" @click.prevent="sendCode">发送验证码</a>
                        <button v-else class="btn btn-secondary">{{'('+second+')秒后再次尝试'}}</button>

                    </div>
                </div>
                <strong class="invalid-feedback" v-if="errors.code">{{ errors.code }}</strong>
            </div>

        </div>
        <div class="card-footer bg-white" >
            <button class="btn btn-primary" @click.prevent="submit">保存</button>
        </div>

    </div>


</template>

<script>

    import {mapState} from "vuex";

    export default {
        props: {
            accountTitle:{default:'账号'},
            codeAction: {required: true},
            title: {type: String, default: '手机号绑定设置'},
            totalTime: {type: Number, default:30},
            formName: {required: true},
            codeTitle: {type: String, default: '手机验证码'},
            titlePlaceholder: {type: String, default: '请输入绑定的手机号'},
            submitAction: {type: String,default:''},
            codePlaceholder: {type: String, default: '请输入手机接收的验证码'}
        },

        data() {
            return {
                captchaImage: "/captcha",
                code: '',
                captcha: '',
                [this.$props.formName]: '',
                enableSend: true,
                second: this.totalTime,
            }
        },
        computed: {
            ...mapState(['errors']),

        },
        methods: {
            updateCaptcha() {
                this.captchaImage = '/captcha?' + Math.random()
            },
            throttle() {
                //验证码倒计时
                this.enableSend = false;
                this.second = this.totalTime;
                let timer = setInterval(() => {
                    this.second--;
                    if (this.second == 0) {
                        clearInterval(timer);
                        this.enableSend = true;
                    }
                }, 1000);
            },
            async sendCode() {
                //发送验证码后，重新刷新图片验证
                if (this.enableSend) {
                    this.$data.model = this.formName;
                    await this.axios.post(this.codeAction, this.$data).catch(_ => {
                        this.updateCaptcha();
                    });

                    this.throttle();
                }

            },
            async submit() {
                let response=await this.axios.post(this.submitAction, this.$data)
                if(response.route){
                    window.location.href=response.route;
                }
            }


        }
    };
</script>

<style>
</style>
